<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
<script>
let xhr = new XMLHttpRequest()
//get方式,请求方式-查询字符串urlencoded(请求头,url)
// xhr.open('get', 'http://localhost:3000/api/login?mobile=18615710930&password=abc')
//post方式,请求方式1.1-查询字符串urlencoded(请求头,url),原理上是可以的,但是基本上不会这样做
/*
xhr.open('post', 'http://localhost:3000/api/login?mobile=18615710930&password=abc')
xhr.send()
*/
let data = {mobile: '18615710930', password: 'abc'}
xhr.open('post', 'http://localhost:3000/api/login')
//post方式,请求方式1.2-查询字符串urlencoded(请求体,url)默认请求格式application/x-www-form-urlencoded
//缺点:拼接字符串不好写,不好读
// xhr.send('mobile='+data.mobile+'&password='+data.password)//通过请求体发送数据,数据量没有限制,相对url安全一点
// xhr.send(`mobile=${data.mobile}&password=${data.password}`) //通过es6模板字符串
//post方式,请求方式2-json字符串
xhr.send(JSON.stringify(data))
// xhr.setRequestHeader('content-type', 'application/json') //需要设置content-type,告诉后端,我们传的数据格式是json
//post方式,请求方式3-formData,是二进制文件
/*
let formData = new FormData()
for(var key in data){
  formData.append(key, data[key])
}
xhr.send(formData)
//不需要主动设置content-type,浏览器自动设置,multipart/form-data
*/
xhr.onload = function(){
  console.log(xhr.responseText)
}

</script>
</html>
